<!DOCTYPE html>
<html lang="en">
<head>

<!-- meta使用viewport以确保页面可自由缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 引入 jQuery Mobile 样式 -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<!-- 引入 jQuery 库 -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- 引入 jQuery Mobile 库 -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/shelf.css">

</head>
<body>
	<section id="page1" data-role="page">
		<header data-role="header">
			<h1>我的书架</h1>
<!-- 			<div class="book">
			<ul>
				<li>
					<a href="#" class="ui-btn ui-icon-search ui-btn-icon-notext ui-btn-left ui-corner-all">button</a>
				</li>
				<li>
					<a href="#" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-btn-left ui-corner-all">button</a>
				</li>
			</ul>
			</div> -->
		</header><!-- /header -->
		<article data-role="content" style="padding: 0;">
			<div class="call" >
				<ul>
					<li><span>0</span></li>
					<li>本周阅读时长/分钟</li>
					<li>点击签到</li>
				</ul>
			</div>
		</article><!-- /content -->
		<article data-role="content">
			<div class="list">
				<ul>
					<li>
						<div class="ui-grid-a">
							<div class="ui-block-a" style="width: 30%;">
								<img src="img/chenghong.jpg">
							</div>
							<div class="ui-block-b" style="width: 70%;">
								<h1>龙族Ⅴ：悼亡者的归来</h1>
								<span>江南</span>
								<br/>

								<p>两天前加入</p>
							</div>
						</div>
					</li>
					<li>
						<div class="ui-grid-a">
							<div class="ui-block-a" style="width: 30%;">
								<img src="img/chenghong.jpg">
							</div>
							<div class="ui-block-b" style="width: 70%;">
								<h1>龙族Ⅴ：悼亡者的归来</h1>
								<span>江南</span>
								<br/>
								
								<p>两天前加入</p>
							</div>
						</div>
					</li>
					<li>
						<div class="ui-grid-a">
							<div class="ui-block-a" style="width: 30%;">
								<img src="img/chenghong.jpg">
							</div>
							<div class="ui-block-b" style="width: 70%;">
								<h1>龙族Ⅴ：悼亡者的归来</h1>
								<span>江南</span>
								<br/>
								
								<p>两天前加入</p>
							</div>
						</div>
					</li>
					<li>
						<div class="ui-grid-a">
							<div class="ui-block-a" style="width: 30%;">
								<img src="img/chenghong.jpg">
							</div>
							<div class="ui-block-b" style="width: 70%;">
								<h1>龙族Ⅴ：悼亡者的归来</h1>
								<span>江南</span>
								<br/>
								
								<p>两天前加入</p>
							</div>
						</div>
					</li>
					<li>
						<div class="ui-grid-a">
							<div class="ui-block-a" style="width: 30%;">
								<img src="img/chenghong.jpg">
							</div>
							<div class="ui-block-b" style="width: 70%;">
								<h1>龙族Ⅴ：悼亡者的归来</h1>
								<span>江南</span>
								<br/>
								
								<p>两天前加入</p>
							</div>
						</div>
					</li>
					<li>
						<div class="ui-grid-a">
							<div class="ui-block-a" style="width: 30%;">
								<img src="img/chenghong.jpg">
							</div>
							<div class="ui-block-b" style="width: 70%;">
								<h1>龙族Ⅴ：悼亡者的归来</h1>
								<span>江南</span>
								<br/>
								
								<p>两天前加入</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</article>
		<footer data-role="footer" data-position="fixed">
				<div data-role="navbar">
			        <ul>
				        <li><a href="bookshelf.html"><img src="img/书架.png" /><br/><span>书架</span></a>
				        </li>
				        <li><a href="home.html"><img src="img/精选.png" /><br/><span>精选</span></a></li>
				        <li><a href="library.html"><img src="img/书库.png" /><br/><span>书库</span></a></li>
				        <li><a href="mine.html"><img src="img/mine.png" /><br/><span>我的</span></a></li>
			        </ul>
			    </div>
			</footer>
	</section><!-- /page -->
</body>
</html>